<!--
 * @Description: 任务列表组件
-->
<template>
    <div class="task-list">
      <el-table 
        :data="tasks" 
        :loading="loading"
        v-loading="loading"
        stripe
        border
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        
        <el-table-column prop="title" label="任务标题" min-width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="task-title">
              <el-text 
                :type="getTaskTitleType(row.priority)"
                class="title-text"
                @click="handleView(row)"
              >
                {{ row.title }}
              </el-text>
           <!--    <el-tag 
                :type="getPriorityType(row.priority)" 
                size="small" 
                class="priority-tag"
              >
                {{ getPriorityText(row.priority) }}
              </el-tag> -->
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="department" label="所属部门" width="150" show-overflow-tooltip />
        
        <el-table-column prop="assignedToNames" label="分配人员" width="150">
          <template #default="{ row }">
            <div class="assigned-users">
              <el-tag 
                v-for="name in row.assignedToNames" 
                :key="name"
                size="small"
                type="info"
                class="user-tag"
              >
                {{ name }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="任务状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="创建时间" width="120" align="center">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="deadline" label="截止时间" width="120" align="center">
          <template #default="{ row }">
            <span :class="getDeadlineClass(row.deadline, row.status)">
              {{ formatDate(row.deadline) }}
            </span>
          </template>
        </el-table-column>
        
        <el-table-column prop="taskType" label="任务类型" width="120" show-overflow-tooltip />
        
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="small" 
                text
                @click="handleView(row)"
              >
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button 
                type="warning" 
                size="small" 
                text
                @click="handleEdit(row)"
              >
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-dropdown @command="(command) => handleDropdownCommand(command, row)">
                <el-button type="info" size="small" text>
                  更多
                  <el-icon><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="changeStatus">
                      <el-icon><Switch /></el-icon>
                      更改状态
                    </el-dropdown-item>
                    <el-dropdown-item command="duplicate">
                      <el-icon><CopyDocument /></el-icon>
                      复制任务
                    </el-dropdown-item>
                    <el-dropdown-item command="delete" divided>
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container" v-if="tasks.length > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <!-- 快速状态更改弹窗 -->
      <el-dialog 
        v-model="showStatusDialog" 
        title="更改任务状态" 
        width="400px"
      >
        <el-form>
          <el-form-item label="新状态">
            <el-select v-model="newStatus" placeholder="请选择新状态">
              <el-option label="待处理" value="pending" />
              <el-option label="进行中" value="in-progress" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showStatusDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmStatusChange">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { 
    View, 
    Edit, 
    Delete, 
    ArrowDown, 
    Switch, 
    CopyDocument 
  } from '@element-plus/icons-vue';
  
  // 接口定义
  interface TaskInfo {
    id: string;
    title: string;
    description: string;
    assignedTo: string[];
    assignedToNames: string[];
    status: 'pending' | 'in-progress' | 'completed' | 'cancelled';
    priority: 'low' | 'medium' | 'high' | 'urgent';
    createdAt: string;
    deadline: string;
    department: string;
    taskType: string;
    attachments?: string[];
    remarks?: string;
  }
  
  // Props 和 Emits
  const props = defineProps<{
    tasks: TaskInfo[];
    loading?: boolean;
  }>();
  
  const emit = defineEmits<{
    edit: [task: TaskInfo];
    delete: [task: TaskInfo];
    view: [task: TaskInfo];
    statusChange: [task: TaskInfo, newStatus: string];
    duplicate: [task: TaskInfo];
  }>();
  
  // 数据
  const currentPage = ref(1);
  const pageSize = ref(20);
  const showStatusDialog = ref(false);
  const newStatus = ref('');
  const currentTask = ref<TaskInfo | null>(null);
  
  // 计算属性
  const totalCount = computed(() => props.tasks.length);
  const tableHeight = computed(() => window.innerHeight - 320);
  
  // 获取任务状态类型
  const getStatusType = (status: string) => {
    const statusMap = {
      'pending': 'warning',
      'in-progress': 'primary',
      'completed': 'success',
      'cancelled': 'danger'
    };
    return statusMap[status as keyof typeof statusMap] || 'info';
  };
  
  // 获取任务状态文本
  const getStatusText = (status: string) => {
    const statusMap = {
      'pending': '待处理',
      'in-progress': '进行中',
      'completed': '已完成',
      'cancelled': '已取消'
    };
    return statusMap[status as keyof typeof statusMap] || status;
  };
  
  // 获取优先级类型
  const getPriorityType = (priority: string) => {
    const priorityMap = {
      'urgent': 'danger',
      'high': 'warning',
      'medium': 'primary',
      'low': 'info'
    };
    return priorityMap[priority as keyof typeof priorityMap] || 'info';
  };
  
  // 获取优先级文本
  const getPriorityText = (priority: string) => {
    const priorityMap = {
      'urgent': '紧急',
      'high': '高',
      'medium': '中',
      'low': '低'
    };
    return priorityMap[priority as keyof typeof priorityMap] || priority;
  };
  
  // 获取任务标题类型
  const getTaskTitleType = (priority: string) => {
    return priority === 'urgent' ? 'danger' : 'primary';
  };
  
  // 格式化日期
  const formatDate = (dateStr: string) => {
    if (!dateStr) return '';
    return new Date(dateStr).toLocaleDateString('zh-CN');
  };
  
  // 获取截止时间样式类
  const getDeadlineClass = (deadline: string, status: string) => {
    if (status === 'completed' || status === 'cancelled') {
      return '';
    }
    
    const now = new Date();
    const deadlineDate = new Date(deadline);
    const diffDays = Math.ceil((deadlineDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
    
    if (diffDays < 0) {
      return 'deadline-overdue';
    } else if (diffDays <= 3) {
      return 'deadline-warning';
    }
    return '';
  };
  
  // 事件处理
  const handleView = (task: TaskInfo) => {
    emit('view', task);
  };
  
  const handleEdit = (task: TaskInfo) => {
    emit('edit', task);
  };
  
  const handleDelete = (task: TaskInfo) => {
    emit('delete', task);
  };
  
  const handleDropdownCommand = (command: string, task: TaskInfo) => {
    switch (command) {
      case 'changeStatus':
        currentTask.value = task;
        newStatus.value = task.status;
        showStatusDialog.value = true;
        break;
      case 'duplicate':
        emit('duplicate', task);
        break;
      case 'delete':
        handleDelete(task);
        break;
    }
  };
  
  const confirmStatusChange = () => {
    if (currentTask.value && newStatus.value) {
      emit('statusChange', currentTask.value, newStatus.value);
      showStatusDialog.value = false;
      currentTask.value = null;
      newStatus.value = '';
    }
  };
  
  const handleSizeChange = (size: number) => {
    pageSize.value = size;
  };
  
  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
  };
  </script>
  
  <style lang="scss" scoped>
  .task-list {
    .task-title {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .title-text {
        cursor: pointer;
        flex: 1;
        
        &:hover {
          color: var(--el-color-primary);
          text-decoration: underline;
        }
      }
      
      .priority-tag {
        flex-shrink: 0;
      }
    }
    
    .assigned-users {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      
      .user-tag {
        font-size: 12px;
      }
    }
    
    .action-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
  
  // 截止时间样式
  .deadline-overdue {
    color: var(--el-color-danger);
    font-weight: bold;
  }
  
  .deadline-warning {
    color: var(--el-color-warning);
    font-weight: bold;
  }
  
  // 表格行样式
  :deep(.el-table__row) {
    &:hover {
      background-color: var(--el-table-row-hover-bg-color);
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .action-buttons {
      flex-direction: column;
      gap: 4px;
    }
  }
  </style>